<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: blueviolet;
				margin-bottom: 20px;
				color: white;
			}
			#box3{
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//得到所有的元素
				var mybox1=document.getElementById("box1");
				var mybox2=document.getElementById("box2");
				var mybox3=document.getElementById("box3");
				
				//添加事件监听
				mybox1.onclick=function(){
					mybox2.style.backgroundColor="yellowgreen";
				}
				mybox1.onmouseover=function(){
					mybox3.style.display="block";
				}
				mybox2.onclick=function(){
					mybox1.style.width="200px";
				}
				mybox2.onmouseover=function(){
					mybox3.style.backgroundColor='darkcyan';
					mybox3.style.border='2px solid red';
				}
			}
		</script>
	</head>
	<body>
		<div id="box1">盒子1</div>
		<div id="box2">盒子2</div>
		<div id="box3">盒子3</div>
	</body>
</html>
